<template>
    <div class="syscart">
        <!-- <h2>竞拍统计</h2> -->
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/sysout/sysoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>竞拍统计</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header">
          <!-- 准备容器 -->
          <div id="main" style="width: 800px;height:500px;margin-bottom:20px"></div>
          <div id="main1" style="width: 800px;height:400px;margin-bottom:20px"></div>
          <div id="main2" style="width: 800px;height:400px;"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/map/js/china.js'
import axios from 'axios'
export default {
    name:'SysCart',
    data() {
      return {
        userAuction:[],
        cart:[],
        goodsName:[],
        goodsCategory:[],
        sum:[],
        timer:null,
        userSearch:[],
        userSearchTJ:[]
      }
    },
    created() {
       this.getAllAuction()
       this.getUserSearch()
    },
    mounted() {
      this.getChart()
      this.markCart()
    }, 
    updated() {
      
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    methods: {
      // 绘图
      markCart(){
        this.timer = setTimeout(()=>{
          console.log("参数为",this.cart)
          for(var i=0;i<this.cart.length;i++){
            this.goodsName.push(this.cart[i].goodsName)
            this.goodsCategory.push(this.cart[i].goodsCategory)
            this.sum.push(this.cart[i].num)
          }
          var search =[] // 图2的数据
          var num = []
          for(var j=0;j<6;j++){
            search.push(this.userSearchTJ[j].userSearch)
            num.push(this.userSearchTJ[j].num)
          }
          console.log(this.goodsName,this.goodsCategory,this.sum,search,num)
          // var myChart = this.$echarts.init(document.getElementById('main'));
          var myChart = echarts.init(document.getElementById('main'));//中国地图
          var myChart1 = echarts.init(document.getElementById('main1'));//柱状图
          var myChart2 = echarts.init(document.getElementById('main2'));//折线图
           // 指定图表的配置项和数据
          var option ={
            title: {
              text: '统计商品竞拍活跃地'
            },
            tooltip:{//悬浮弹框
              triggerOn:'click',//触发条件
              enterable:true,//鼠标是否可以进入提示框浮层中
              formatter(item){
                // return "<span style='color:#fff'>"+item.name+"</span>"
                return item.name
              }
              // formatter: '{a}-{b}'
            },
            visualMap:[{//映射高亮
              orient:'horizontal',//水平
              type:'piecewise',//离散
              bottom:0,
              pieces:[//颜色配置区间
                {
                  min:0,
                  max:0,
                  color:'rgb(207, 207, 207)'
                },
                {
                  min:1,
                  max:100,
                  color:'skyblue'
                },
                {
                  min:101,
                  max:200,
                  color:'rgb(145, 235, 135)'
                },
                {
                  min:201,
                  max:400,
                  color:'rgb(192, 239, 122)'
                },
                {
                  min:401,//没有max表示无限大
                  color:'rgb(239, 124, 122)'
                }
              ]
            }],
            series:[//图的类型
              {
                name:'省',
                type:'map',//地图 bar,line,map
                map:'china',//中国地图---引入china.js
                roam:false,
                zoom:1.2,
                aspectScale:0.75,
                top:40,
                layoutCenter:['5%','5%'],//标签对齐等属性以实现想要的标签布局效果
                label:{
                  normal:{
                    show:true,
                    textStyle:{
                      fontSize:8
                    }
                  }
                },
                data:[
                  { name:'广西', value:189},
                  { name:'广东', value:600},
                  { name:'北京', value:345},
                  { name:'河北', value:908},
                  { name:'湖南', value:97},
                  { name:'内蒙古', value:45},
                  { name:'江苏', value:132},
                  { name:'河南', value:246},
                  { name:'青海', value:256},
                  { name:'浙江', value:347},
                  { name:'湖南', value:321},
                  { name:'湖北', value:105},
                  { name:'四川', value:666},
                  { name:'陕西', value:112},
                  { name:'天津', value:68},
                  { name:'黑龙江', value:72}
                ]
              }
            ],
            itemStyle:{
              normal:{
                areaColor:'rgba(0,255,236,0)',
                borderColor:'rgba(0,0,0,0.2)'
              },
              emphasis:{//选中的颜色及阴影效果
                areaColor:'rgba(255,180,0,0.8)',
                shadowOffsetX:0,
                shadowOffsetY:0,
                shadowBlur:20,
                borderWidth:0
              }
            },
            
          }
          myChart.setOption(option);//绘图展示

          var option1 = {
            title: {
              text: '商品竞拍人数'
            },
            color:'skyblue',
            tooltip: {},
            legend: {
              data: ['竞拍人数']
            },
            xAxis: {
              data: this.goodsName,
              name: '商品名'
            },
            yAxis: {
              name:'竞拍人数'
            },
            series: [
              {
                name: '竞拍人数',
                type: 'bar',
                data: this.sum
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart1.setOption(option1);

          var option2 = {
            title: {
              text: '竞拍者喜欢拍卖的商品'
            },
            color:'skyblue',
            xAxis: {
              name: '搜索商品',
              type: 'category',
              data: search
            },
            yAxis: {
              name: '数量',
              type: 'value'
            },
            series: [
              {
                data: num,
                type: 'line'
              }
            ]
          };
          myChart2.setOption(option2);
        },1000)
      },
      // 获取图片参数
      getChart(){
        axios.get("http://localhost:8080/api/getCart/getCartlist",{
          params:{
            id:1
          }
        }).then(
          res=>{
            this.cart = res.data
            console.log("所有绘图参数为",this.cart)
            console.log("999",res)
          },
          error=>{
            console.log("88",error.message)
          }
        )
      },
      //获取所有竞拍者信息
      getAllAuction(){
        axios.get("http://localhost:8080/api/getAllAuction/getAllAuctionlist",{
          params:{
            id:1
          }
        }).then(
          res=>{
            this.userAuction = res.data
            this.userAuction.sort(function(x,y) {//大-小，降序排列，对于最新时间是升序
                return y.goodsId-x.goodsId;
            })
            console.log("所有用户竞拍为",this.userAuction)
            console.log("999",res)
          },
          error=>{
            console.log("88",error.message)
          }
        )
      },
      getUserSearch(){
        axios.get("http://localhost:8080/api//getUserSearch//getUserSearchlist",{
          params:{
            id:1
          }
        }).then(
          res=>{
            // var hash = []
            this.userSearch = res.data
            //  第⼀步，去重
            for (var i = 0; i < this.userSearch.length; i++) {
              for (var j = i + 1; j < this.userSearch.length; j++) {
                if (this.userSearch[i].userSearch === this.userSearch[j].userSearch) {
                  ++i;
                  j = i;
                }
              }
              this.userSearch[i].num = 0;
              this.userSearchTJ.push(this.userSearch[i]);
            }
            // 第⼆步，统计重复个数
            this.userSearchTJ.forEach(item => {
              this.userSearch.forEach(dd => {
                if (item.userSearch === dd.userSearch) {
                  item.num++
                }
              })
            });
            //排序
            this.userSearchTJ.sort(function(x,y) {//大-小，降序排列，对于最新时间是升序
                return y.num-x.num;
            })
            console.log("所有用户的搜索词为",this.userSearch,this.userSearchTJ)
            console.log("999",res)
          },
          error=>{
            console.log("88",error.message)
          }
        )
      },
    },  
}
</script>

<style lang="less" scoped>
.syscart {
  margin: 20px;
  width: 100%;

    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }
    .header {
      width: 100%;
      height: 750px;
      background-color: #fff;
      overflow: scroll;
      overflow-x: hidden;
      padding: 20px;
    }
}
</style>